<template>
  <div>
    <top></top>
    <Frame2 title="个人资料">
      <el-form style="margin-left: 20px;margin-top: 10px">

        <el-form-item label="您的邮箱:">
          <el-input placeholder="your-Email" v-model="userEmail" clearable class="input_style" style="width: 20%;margin-left: 10px"></el-input>
<!--          <el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>-->
        </el-form-item>
        <el-form-item label="您的昵称:">
          <el-input placeholder="your-name" v-model="userName" clearable class="input_style" style="width: 20%;margin-left: 10px"></el-input>
<!--          <el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>-->
        </el-form-item>
        <el-form-item label="新的密码：">
          <el-input placeholder="请输入新密码" v-model="userPassword" clearable class="input_style" style="width: 20%"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码：">
          <el-input placeholder="再次输入密码" v-model="userPassword2" clearable class="input_style" style="width: 20%"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 80px">
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </Frame2>
    <bottom></bottom>
  </div>
</template>

<script>
import top from "../base/top";
import bottom from "../base/bottom";
import Frame2 from "../lys/Frame";

import {profile} from "../lys/data/global"
export default {
  name: "information",
  components:{
    top,bottom,Frame2
  },
  data(){
    return{
      userEmail:'',
      userName:'',
      userPassword:'',
      userPassword2:''
    }
  },
  mounted(){
    this.getProfileInfo()
  },
  methods:{
    onSubmit() {
      this.userName = this.userName.trim()
      this.userEmail = this.userEmail.trim()
      this.userPassword = this.userPassword.trim()
      this.userPassword2 = this.userPassword2.trim()
      if(!this.userName ){
        alert("昵称不能为空!")
      }
      else if(!this.userEmail){
        alert("邮箱不能为空!")
      }
      else if(this.userEmail.search(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/i)===-1){
        alert("邮箱格式错误！")
      }
      else if(this.userPassword && this.userPassword.length < 6){
        alert("密码太短!")
      }
      else if(this.userPassword && this.userPassword !== this.userPassword2 ){
        alert("两次密码不一致!")
      }
      else{
        let config = {
          url: "/cbug/user/infoModify",
          method:"post",
          data:{
            token:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJle",
            userName: this.userName,
            userEmail: this.userEmail,
            userPassword: this.userPassword
          }
        }
        console.log(config)
      }
    },
    getProfileInfo(){
      let config = {
        url:"/cbug/user/info",
        method:"post",
        data:{
          token:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJle"
        }
      }
      this.userName = profile.data.userName
      this.userEmail = profile.data.userEmail
    }
  }
}
</script>

<style scoped>

</style>
